<template>

    <div class="table1_container">
        <div class="table1_dataShower" style="padding-bottom: 50px; padding-top: 50px; box-sizing: border-box">
            <button class="report-top-button" @click="back">返回上级页面</button>
            <div style="text-align: center; margin: 10px 0;">
                <div style="display: inline-flex; gap: 20px;">
                    <!-- 未完成 -->
                    <div style="display: flex; align-items: center;">
                        <div
                            style="width: 16px; height: 16px; background-color: #ffffff; border: 1px solid #ddd; margin-right: 5px;" />
                        <span>未完成</span>
                    </div>

                    <!-- 已完成 -->
                    <div style="display: flex; align-items: center;">
                        <div
                            style="width: 16px; height: 16px; background-color: #e6f7e6; border: 1px solid #ddd; margin-right: 5px;" />
                        <span>已完成</span>
                    </div>

                    <!-- 不合格重采 -->
                    <div style="display: flex; align-items: center;">
                        <div
                            style="width: 16px; height: 16px; background-color: #ffebeb; border: 1px solid #ddd; margin-right: 5px;" />
                        <span>不合格重采</span>
                    </div>
                </div>
            </div>
            <h1>见证取样记录</h1>
            <div>
                <span>
                    工程名称：
                </span>
                <span>
                    中原工学院航空港校区一期（一标段、二标段）二标段建设工程项目1#学生宿舍
                </span>
            </div>
            <table class="wendu-table1_top_table">
                <tr>
                    <td colspan="2">样品名称及规格</td>
                    <td>取样部位</td>
                    <td>批量</td>
                    <td>数量（t）</td>
                    <td colspan="2">日期（取样）</td>
                    <td>合格证编号</td>
                </tr>
                <tr>
                    <td colspan="2">钢筋 HRB400E C 8</td>
                    <td>1#学生宿舍2层至3层</td>
                    <td>1组</td>
                    <td>30</td>
                    <td colspan="2"></td>
                    <td>/</td>
                </tr>
                <tr>
                    <td colspan="2">钢筋 HRB400E C 22</td>
                    <td>1#学生宿舍2层至3层</td>
                    <td>1组</td>
                    <td>10.728</td>
                    <td colspan="2"></td>
                    <td>/</td>
                </tr>
                <tr>
                    <td colspan="2">钢筋 HRB400E C 20</td>
                    <td>1#学生宿舍2层至3层</td>
                    <td>1组</td>
                    <td>8.004</td>
                    <td colspan="2"></td>
                    <td>/</td>
                </tr>
                <tr>
                    <td colspan="2">钢筋 HRB400E C 18</td>
                    <td>1#学生宿舍2层至3层</td>
                    <td>1组</td>
                    <td>5.28</td>
                    <td colspan="2"></td>
                    <td>/</td>
                </tr>
                <tr class="sign-row">
                    <td colspan="4" class="sign-td">
                        <div class="sign-block">
                            <div class="line">施工单位（签章）</div>
                            <div class="line">取样人：</div>
                            <div class="date">年 月 日</div>
                        </div>
                    </td>
                    <td colspan="4" class="sign-td">
                        <div class="sign-block">
                            <div class="line">见证单位（签章）</div>
                            <div class="line">见证人：</div>
                            <div class="date">年 月 日</div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
import router from '@/router'
import { searchInpsectCheckPreview } from '@/api/statementManage'

/*
 *    这个报表真麻烦！！！
 *
 */

export default {
    data() {
        return {
            localStorageId: '',
            reportData: {},
            previewData: {}
        }
    },
    async mounted() { // 钩子函数
        // 从localstorage中拿数据
        const localStorageId = this.$route.query.localStorageId
        this.localStorageId = localStorageId // 保存id用于销毁时清理
        if (localStorageId) {
            const data = localStorage.getItem(localStorageId)
            if (data) {
                this.reportData = JSON.parse(data)
                console.log(this.reportData)
            }
        }

        // // 赶紧从接口拿数据
        // try {
        //   const { result } = await searchInpsectCheckPreview(this.reportData.taskId)
        //   console.log(result)
        //   this.previewData = result
        //   console.log(this.previewData)
        //   this.$message.success('报表已生成！')
        // } catch (err) {
        //   this.$message.error('报表生成失败！')
        // }
    },
    beforeDestroy() { // 离开页面要做的事
        // 那就是清除localstorage！！！
        if (this.localStorageId) {
            localStorage.removeItem(this.localStorageId)
        }
        document.querySelector('body').setAttribute('style', 'background-color: white;') // 还原，因为这是个全局样式
    },
    beforeCreate() {
        document.querySelector('body').setAttribute('style', 'background-color:#f5f5f5;') // 设置对比色
    },
    methods: {
        back() {
            this.$router.go(-1)
        }
    }
}
</script>

<style>
/*
先来设置每个任务项对应的背景颜色吧！
 */
.row-unfinished {
    background-color: #ffffff;
    /* 未完成 - 白色或默认色 */
}

.row-finished {
    background-color: #e6f7e6;
    /* 已完成 - 浅绿色 */
}

.row-failed {
    background-color: #ffebeb;
    /* 不合格重采 - 浅红色 */
}

.table1_container {
    width: 80%;
    background: white;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding-bottom: 20px;
}

.table1_dataShower {
    width: 80%;
    background: white;
    margin: 0 auto;
    border: 2px black solid;
}

/*这是返回按钮的样式*/
.report-top-button {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Arial', sans-serif;
    color: #ffffff;
    background: linear-gradient(90deg, #1e3a8a, #3b82f6);
    /* 建筑行业蓝色调，稳重且有活力 */
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-top-button:hover {
    background: linear-gradient(90deg, #1e3a8a, #2563eb);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.report-top-button:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(0);
}

/*表格样式*/
.wendu-table1_top_table {
    width: 90%;
    margin: 0 auto;
    border-collapse: collapse;
    border: 1px solid black;
    table-layout: fixed;
}

/*表格的样式*/
.wendu-table1_top_table tr td {
    height: 50px;
    border: 1px solid black;
    word-wrap: break-word;
    /* 允许长单词换行 */
    overflow-wrap: break-word;
    /* 更现代的换行属性 */
}

#table1_top_table_last_col {
    width: 20%;
    min-height: 50px;
}

th {
    box-sizing: border-box !important;
}

.sign-row td {
    padding: 12px 8px;
    /* 单元格内部间距 */
    border: 1px solid black;
}

/* 外层容器使用 flex 排列两列并留出空隙 */
.sign-container {
    display: flex;
    gap: 40px;
    /* 两列之间的水平间隙，可调整 */
    align-items: stretch;
    /* 两列高度一致 */
    justify-content: space-between;
}

/* 每个签章块内按列布局（三行） */
.sign-block {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 180px;
    /* 最小宽度，可按需调整 */
    position: relative;
    /* 为 date 的绝对定位提供参考 */
    padding: 6px 8px;
}

/* 普通行文字（第一、二行） */
.sign-block .line {
    margin-bottom: 6px;
    color: #333;
    line-height: 5;
    text-align: left;
}

/* 年月日靠右下角：使用 margin-top: auto 将其推到底部，再右对齐 */
.sign-block .date {
    margin-top: auto;
    /* 推到容器底部 */
    text-align: right;
    /* 靠右显示 */
    color: #333;
    padding-right: 6px;
}

/* 小屏响应：改为垂直排列，两块上下显示 */
@media (max-width: 700px) {
    .sign-container {
        flex-direction: column;
        gap: 12px;
    }

    .sign-block {
        min-width: auto;
    }
}

.date {
    letter-spacing: 24px;
    /* 或使用 word-spacing */
}
</style>
